<template>
	<view>
		<view class="record">
			<view class="title-btn" :class="{ active: currentTab === 0 }" @click="handleTabClick(0)">
				预约管理
			</view>
			<view class="title-btn" :class="{ active: currentTab === 1 }" @click="handleTabClick(1)">
				访客记录
			</view>
		</view>
		<!-- 预约管理列表 -->
		<view class="management">
			<view class="content-head">
				<!-- 		<view class="head-box" v-show="currentTab === 0">
					<view class="select-title">状态：</view>
					<view class="select-item">
						<uni-data-select v-model="queryForm.auditStatus" :localdata="sportRange" @change="change"
							class="custom-select" mode="none" placeholder="请选择审核状态"></uni-data-select>
					</view>
				</view> -->
				<view class="head-box">
					<view class="select-title">姓名：</view>
					<view class="select-item">
						<uni-easyinput errorMessage v-model="queryForm.name" focus placeholder="请输入姓名" @input="input"
							:inputBorder="false" placeholderStyle="color: #999;font-size:0.93vw"></uni-easyinput>
					</view>
				</view>
				<view class="head-box">
					<view class="select-title">电话：</view>
					<view class="select-item">
						<uni-easyinput errorMessage v-model="queryForm.visitorPhone" focus placeholder="请输入电话"
							@input="input" :inputBorder="false" placeholderStyle="color: #999;font-size:0.93vw"
							type="number" maxlength="11"></uni-easyinput>
					</view>
				</view>
				<view class="head-box">
					<view class="select-title">日期：</view>
					<view class="select-item">
						<uni-datetime-picker type="date" v-model="queryForm.visitorDate" :start="startDate"
							:end="endDate" :border="false" @change="handleDateChange" placeholder="请选择日期" />
					</view>
				</view>
				<view class="search" @click="searchData">
					<view class="search-item">
						<image src="@/static/icon/icon-9.png" mode=""></image>
					</view>
					<view class="search-title ">搜索</view>
				</view>
			</view>
			<view class="table-item">
				<uni-table stripe emptyText="暂无更多数据" :border="false" class="custom-border-table">
					<!-- 表头行 -->
					<uni-tr>
						<uni-th align="center" class="table-title">姓名</uni-th>
						<uni-th align="center" class="table-title">电话号码</uni-th>
						<uni-th align="center" class="table-title">公司/单位</uni-th>
						<uni-th align="center" class="table-title">被访人</uni-th>
						<uni-th align="center" class="table-title">拜访时间</uni-th>
						<uni-th align="center" class="table-title">随行人数</uni-th>
						<uni-th align="center" class="table-title">
							{{ currentTab === 0 ? '拜访状态' : '拜访状态' }}
						</uni-th>
						<uni-th align="center" class="table-title">操作</uni-th>
					</uni-tr>

					<!-- 加载状态 -->
					<template v-if="loading">
						<uni-tr v-for="n in 5" :key="n">
							<uni-td align="center" v-for="m in 8" :key="m">
								<view class="loading-skeleton"></view>
							</uni-td>
						</uni-tr>
					</template>

					<!-- 数据列表 -->
					<uni-tr v-for="(item, index) in allVisitList" :key="item.id" class="table-row" v-else>
						<uni-td align="center" class="table-Text">{{ item.visitorName }}</uni-td>
						<uni-td align="center" class="table-Text">{{ item.visitorPhone }}</uni-td>
						<uni-td align="center" class="table-Text">{{ item.visitorDepartName }}</uni-td>
						<uni-td align="center" class="table-Text">{{ item.intervieweeName }}</uni-td>
						<uni-td align="center" class="table-Text">{{ item.visitorBeginDate }}</uni-td>
						<uni-td align="center" class="table-Text">
							{{ item.visitorPeopleNumber ? (item.visitorPeopleNumber + '人') : '无' }}
						</uni-td>
						<!-- 预约管理 -->
						<uni-td align="center">
							<template #default>
								<!-- 预约管理状态 -->
								<span :class="['status-badge', getStatusClass(item.visitStatus)]">
									{{ getStatusText(item.visitStatus) }}
								</span>


							</template>
						</uni-td>
						<uni-td align="center" class="table-Text">
							<template #default>
								<span class="btnDetails" @click="handleDetail(item.id,'pre')"
									v-if="currentTab === 0">详情</span>
								<span class="btnDetails" @click="handleDetail(item.id,'record')" v-else>详情</span>
							</template>
						</uni-td>
					</uni-tr>
				</uni-table>
			</view>

			<!-- 分页组件 -->
			<view class="pagination" v-if="totalPages > 0 && !loading">
				<view class="page-btn" @click="prevPage" :class="{ disabled: currentPage === 1 }">上一页</view>

				<!-- 第一页始终显示 -->
				<view class="page-number" @click="goToPage(1)" :class="{ active: currentPage === 1 }">1</view>

				<!-- 显示当前页附近的页码，最多显示3个数字 -->
				<template v-for="page in displayPages" :key="page">
					<view class="page-number" @click="goToPage(page)" :class="{ active: currentPage === page }">
						{{ page }}
					</view>
				</template>

				<!-- 最后一页始终显示（当总页数大于1时） -->
				<view class="page-number" @click="goToPage(totalPages)" :class="{ active: currentPage === totalPages }"
					v-if="totalPages > 1">
					{{ totalPages }}
				</view>

				<view class="page-btn" @click="nextPage" :class="{ disabled: currentPage === totalPages }">下一页</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		computed,
		watch,
		onMounted,
	} from "vue"
	import {
		$get,
		$post
	} from "@/utils/request.js"
	const props = defineProps({
		currentIndex: {
			type: Number, // 指定类型
			required: true, // 是否必传
			default: 0
		}
	})

	onMounted(() => {
		handleTabClick(props.currentIndex)
	})

	// 头部切换
	const currentTab = ref(0)
	const handleTabClick = (index) => {
		currentTab.value = index
		currentPage.value = 1
		if (index == 1) {
			visitStatus.value = 0
			auditStatus.value = 3
		} else {
			visitStatus.value = '';
			queryForm.value = {};
			auditStatus.value = 1
		}

		fetchData()
	}

	// 搜索条件
	const queryForm = ref({});

	const selectedValue = ref('')
	const nameValue = ref(null)
	const phoneValue = ref(null)
	const selectedDate = ref(null)
	const visitStatus = ref(null)

	// 状态下拉
	const sportRange = ref([{
			value: 0,
			text: "待审核"
		},
		{
			value: 1,
			text: "已通过"
		},
		{
			value: 2,
			text: "已拒绝"
		},
		{
			value: 3,
			text: "已结束"
		},
	])

	const change = () => {
		currentPage.value = 1
		fetchData()
	}

	// 日期选择 - 单日期配置
	const startDate = ref('2020-01-01');
	const endDate = ref('2030-12-31');

	// 处理单日期变化
	const handleDateChange = (newDate) => {
		selectedDate.value = newDate;
		currentPage.value = 1;
		fetchData();
	};

	// 分页相关
	const currentPage = ref(1) // 当前页码
	const pageSize = ref(6) // 每页显示条数
	const totalItems = ref(0) // 总记录数（从后端接口获取）
	const totalPages = computed(() => Math.ceil(totalItems.value / pageSize.value)) // 总页数
	const loading = ref(false) // 加载状态
	const auditStatus = ref(1)

	// 原始数据（存储后端返回的当前页数据）
	const allVisitList = ref([]);
	// 获取记录数据
	const getRecord = () => {
		loading.value = true
		queryForm.value.pageSize = pageSize.value
		queryForm.value.pageNum = currentPage.value
		queryForm.value.auditStatus = auditStatus.value //查询通过

		$get('/system/visitorInfo/list', queryForm.value).then(res => {
			totalItems.value = res.total // 从后端获取总记录数
			allVisitList.value = res.rows || [] // 从后端获取当前页数据
		}).finally(() => {
			loading.value = false
		})
	}

	// 过滤后的数据
	const filteredList = ref([])

	// 当前页数据
	const currentPageData = computed(() => {
		return allVisitList.value
	})

	// 显示的页码（最多显示3个数字页码）
	const displayPages = computed(() => {
		const pages = [];
		const maxVisible = 3; // 最多显示3个数字页码

		// 总页数较少时，直接显示所有页码（不显示省略号）
		if (totalPages.value <= maxVisible + 2) {
			for (let i = 2; i < totalPages.value; i++) {
				pages.push(i);
			}
			return pages;
		}

		// 当前页靠近首页
		if (currentPage.value <= maxVisible) {
			// 显示2到maxVisible+1的页码
			for (let i = 2; i <= maxVisible + 1; i++) {
				pages.push(i);
			}
			// 添加尾部省略号
			pages.push('...');
		}
		// 当前页靠近尾页
		else if (currentPage.value >= totalPages.value - maxVisible + 1) {
			// 添加头部省略号
			pages.push('...');
			// 显示最后maxVisible个页码
			for (let i = totalPages.value - maxVisible; i < totalPages.value; i++) {
				pages.push(i);
			}
		}
		// 当前页在中间区域
		else {
			// 添加头部省略号
			pages.push('...');
			// 显示当前页附近的页码
			for (let i = currentPage.value - 1; i <= currentPage.value + 1; i++) {
				pages.push(i);
			}
			// 添加尾部省略号
			pages.push('...');
		}

		return pages;
	})

	// 分页方法
	const prevPage = () => {
		if (currentPage.value > 1) {
			currentPage.value--
			fetchData() // 请求上一页数据
		}
	}

	const nextPage = () => {
		if (currentPage.value < totalPages.value) {
			currentPage.value++
			fetchData() // 请求下一页数据
		}
	}

	const goToPage = (page) => {
		// 忽略省略号
		if (page === '...') return
		currentPage.value = page
		fetchData() // 请求指定页数据
	}


	// 预约审核状态映射
	const statusMap = {
		0: {
			text: '待签到',
			class: 'status-pending'
		},
		1: {
			text: '拜访中',
			class: 'status-approved'
		},
		2: {
			text: '暂时离开',
			class: 'status-completed'
		},
		3: {
			text: '拜访结束',
			class: 'status-rejected'
		},


		// 0: {
		// 	text: '待审核',
		// 	class: 'status-pending'
		// },
		// 1: {
		// 	text: '已通过',
		// 	class: 'status-approved'
		// },
		// 2: {
		// 	text: '已拒绝',
		// 	class: 'status-completed'
		// },
		// 3: {
		// 	text: '已结束',
		// 	class: 'status-rejected'
		// }
	};

	// 获取预约状态样式类
	const getStatusClass = (status) => {
		return statusMap[status]?.class || 'status-default';
	};
	// 获取预约状态文本
	const getStatusText = (status) => {
		return statusMap[status]?.text || '未知状态';
	};

	// 访客记录状态
	const statusMapVis = {
		1: {
			text: '已拜访',
			class: 'status-approved'
		},
		2: {
			text: '已结束',
			class: 'status-rejected'
		},

	};
	const getStatusClassVis = (status) => {
		return statusMapVis[status]?.class || 'status-rejected';
	};
	const getStatusTextVis = (status) => {
		return statusMapVis[status]?.text || '未知状态';
	};






	// 预约管理详情查看
	const emitPre = defineEmits(['detail-pre'])
	const handleDetail = (id, mark) => {
		emitPre('detail-pre', id, mark)
	};


	// 搜索数据
	const searchData = () => {
		currentPage.value = 1
		fetchData()
	}

	// 输入处理
	const input = () => {

	}

	// 获取数据
	const fetchData = () => {
		getRecord()
	}
	const onParentNotify = (type) => {
		if (type === 'releaseSuccess') {
			fetchData()
		}
	};

	defineExpose({
		onParentNotify
	});

	// 监听当前页变化，加载对应页数据
	watch(currentPage, (newVal) => {
		uni.pageScrollTo({
			scrollTop: 0,
			duration: 300
		})
	})

	// 初始加载数据
	fetchData()
</script>

<style lang="scss" scoped>
	.record {
		width: 100%;
		height: 5vw;
		display: flex;
		gap: 0.52vw;
		align-items: center;
		padding: 30rpx;
		box-sizing: border-box;

		.title-btn.active {
			color: var(--color-ff);
			background-color: var(--color-29);
		}

		.title-btn:hover {
			transition: all 0.3s ease;
			transform: translateY(-5px);
			box-shadow: 0 8px 15px rgba(0, 0, 0, 0.15);
		}

		.title-btn {
			width: 6vw;
			height: 3vw;
			text-align: center;
			line-height: 3vw;
			background-color: var(--color-ff);
			border-radius: 0.3vw;
			color: var(--color-33);
			font-size: var(--text-18);
			font-weight: bold;
			cursor: pointer;
			transition: all 0.3s ease;
			transform: translateY(0);
		}
	}

	.management {
		width: 100%;
		height: 100%;

		.content-head {
			width: 100%;
			height: 5vw;
			padding: 0.4vw 0.8vw;
			display: flex;
			align-items: center;
			gap: 1.2vw;

			.head-box {
				width: 18.5vw;
				height: 3.5vw;
				background-color: #fff;
				border-radius: 0.4vw;
				border: 1px solid #D6DDE5;
				display: flex;
				align-items: center;
				justify-content: center;

				.select-title {
					color: var(--color-33);
					font-size: var(--text-20);
					font-weight: var(--fong-w-500);
				}

				.select-item {
					width: 64%;
					height: 3.5vw;
					display: flex;
					justify-content: center;
					align-items: center;

					::v-deep .uni-select,
					::v-deep .uni-select__input-placeholder,
					::v-deep .uni-input-input,
					::v-deep .uni-date__x-input,
					::v-deep .icon-calendar {
						font-size: var(--text-18) !important;
						color: var(--color-99) !important;
					}

					// 日历
					.uni-datetime-picker .uni-icons {
						display: none !important;
					}


					::v-deep .uni-select__selector-empty,
					::v-deep .uni-select__selector-item {
						font-size: var(--text-16) !important;
						color: var(--color-99) !important;
					}


				}
			}

			.search:hover {
				transition: all 0.3s ease;
				transform: translateY(-5px);
				box-shadow: 0 8px 15px rgba(0, 0, 0, 0.15);
			}

			.search {
				width: 8vw;
				height: 3.5vw;
				background-color: var(--color-32);
				border-radius: 0.40vw;
				text-align: center;
				line-height: 3.5;
				display: flex;
				justify-content: center;
				align-items: center;
				gap: 0.52vw;
				cursor: pointer;
				transition: all 0.3s ease;
				transform: translateY(0);

				.search-title {
					color: #fff;
					font-size: var(--text-20);
				}

				.search-item {
					width: 2vw;
					height: 2vw;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}
		}

		.table-item {
			width: 100%;
			padding: 0.4vw 0.8vw;
			box-sizing: border-box;

			.table-title {
				color: var(--color-33);
				font-size: var(--text-20);
				font-weight: var(--font-w-600);
				padding: 1.5vw 0vw;
			}

			.table-Text {
				color: var(--color-33);
				font-size: var(--text-20);
				padding: 1.5vw 0vw;
			}

			::v-deep .custom-border-table {
				border: 1px solid #d9dbdd !important;
				border-radius: 4px;
				overflow: hidden;
			}

			::v-deep .table-row {
				background-color: #fff;
			}

			::v-deep .table-row:nth-child(even) {
				background-color: #edf3ff;
			}

			// 暂无数据样式
			::v-deep .uni-table-text {
				font-size: var(--text-20);
			}

			.status-pending {
				padding: 0.52vw 1vw;
				background-color: #ff8a00;
				border-radius: 0.42vw;
				color: #fff0d9;
				font-size: var(--text-20);
			}

			.status-approved {
				padding: 0.52vw 1vw;
				background-color: #006aff;
				border-radius: 0.42vw;
				color: #e6f0ff;
				font-size: var(--text-20);
			}

			.status-completed {
				padding: 0.52vw 1vw;
				background-color: #11b800;
				border-radius: 0.42vw;
				color: #e6f7e3;
				font-size: var(--text-20);
			}

			.status-rejected {
				padding: 0.52vw 1vw;
				background-color: #707070;
				border-radius: 0.42vw;
				color: #f0f0f0;
				font-size: var(--text-20);
			}

			.btnDetails {
				padding: 0.52vw 1vw;
				background-color: var(--color-32);
				color: var(--color-ff);
				font-size: var(--text-20);
				border-radius: 0.42vw;
				cursor: pointer;
			}

			// 加载骨架屏样式
			.loading-skeleton {
				width: 80%;
				height: 1.5vw;
				background-color: #f0f0f0;
				border-radius: 4px;
				animation: skeleton-loading 1.5s infinite;
			}

			@keyframes skeleton-loading {

				0%,
				100% {
					opacity: 0.9;
				}

				50% {
					opacity: 0.5;
				}
			}
		}

		// 分页样式
		.pagination {
			display: flex;
			justify-content: center;
			align-items: center;
			gap: 0.5vw;
			margin: 2vw 0;
			flex-wrap: wrap;

			.page-btn,
			.page-number {
				min-width: 3vw;
				height: 2.5vw;
				line-height: 2.5vw;
				text-align: center;
				border-radius: 0.3vw;
				cursor: pointer;
				font-size: var(--text-18);
				padding: 0 0.5vw;
			}

			.page-btn {
				background-color: #f5f7fa;
				color: #666;
				border: 1px solid #dcdfe6;
			}

			.page-number {
				background-color: #fff;
				color: #333;
				border: 1px solid #dcdfe6;
			}

			.page-number.active {
				background-color: var(--color-32);
				color: var(--color-ff);
				border-color: var(--color-32);
			}

			.page-btn.disabled {
				opacity: 0.4;
				color: var(--color-99);
				cursor: not-allowed;
			}
		}
	}
</style>